<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="shortcut icon" href="/static/img/logo.png">
    <script type="text/javascript" src="/static/js/jquery3.5.1.js"></script>
    <script type="text/javascript" src="/static/js/bootstrap.bundle.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome-animation@0.2.1/dist/font-awesome-animation.min.css">
    <link rel="stylesheet" href="/static/css/main.css">
    <script type="text/javascript" src="/static/js/echarts.min.js"></script>
    <title>首页|智能大棚</title>
</head>

<body>
    <div class="container">
        <div class="welcome">
            <img src="/static/img/logo.png">
            <div class="login_logo">智能大棚</div>
        </div>
        <div class="sign">
            <div class="login_box">
                <div class="datacard">
                        <h4 class="login_title">登录</h4>
                        <div class="form">
                            <div class="form-group">
                                <input type="text" class="form-control" autofocus="autofocus" placeholder="用户名" id="nickname">
                            </div>
                            <div class="form-group">
                                <input type="password" class="form-control" placeholder="密码" id="password">
                            </div>
                            <button id="loginBtn" class="btn btn-outline-primary login_button">立即登录</button>
                        </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        login_check = function(){
            //取出表单中的值
            nickname=$("#nickname").val()
            passwd=$("#password").val()
            if (nickname==""||passwd==""){
                alert("用户名或密码不能为空！")
                return false
            }
            data={
                'nickname':nickname,
                'password':passwd
                }
            $.post('/login_check/',data,function(ans){
                if (ans=="true"){
                    window.location.replace("/");
                }
                else{ 
                    alert("登陆失败！请检查用户名或密码是否正确.");
                }
            })
        }
        check_session=function(){
            $.get('/check_session/').done(function(ans){
                data=$.parseJSON(ans);
                console.log(data)
                if(data["session"]=="true"){
                    alert("已登录！")
                    window.location.replace("/");
                }
            })
        }
        //<! --定义所有触发事件 -->
        $("#loginBtn").click(function(){
            login_check()
        })
        window.onload=function(){
            check_session()
        }
    </script>
    <style>
        .sign{
            height: 100%;
            min-height: 750px;
            text-align: center;
            font-size: 14px;
        }
        .login_box{
            width: 400px;
            margin: 100px auto 0;
            padding: 50px 50px 30px;
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 0 8px rgba(0,0,0,.1);
            vertical-align: middle;
            display: inline-block;
        }
        .login_logo{
            position: absolute;
            left: 275px;
            top: 65px;
            font-size: 34px;
        }
        .login_title{
            margin: 0 auto 50px;
            padding: 10px;
            font-weight: 400;
            color: #969696;
        }
        .welcome img{
            position: absolute;
            top: 56px;
            width:70px;
        }
        .login_button{
            margin-top: 20px;
            margin-bottom: 20px;
            width: 100%;
            padding: 9px 18px;
            font-size: 18px;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            outline: none;
            display: block;
            clear: both;
            color: white;
            background: #3194d0;
        }
    </style>
</body>

</html>